<form [formGroup]="selectForm">
  <div class="row animated slideInUp">
    <div class="input-group input-group-sm col-12">
      <input type="text" class="form-control" placeholder="{{ selector?.search.placeholder }}"
             [formControl]="selectForm?.controls[selector?.search.name]" (keypress)="enter($event)">
      <div class="input-group-append">
        <span class="btn btn-sm" *ngIf="selector?.choiceItems || selector?.dateTimeRange" (click)="toggleCollapse()">
          高级选项
          <span class="fa fa-caret-down"></span>
        </span>
        <button class="btn btn-sm" [disabled]="!selectForm?.valid"
                (click)="confirmed()">
          <span class="fa fa-fw fa-search"></span>{{ selector?.search.title }}
        </button>
        <button class="btn btn-sm" (click)="reset()">
          <span class="fa fa-fw fa-undo"></span>重置
        </button>
      </div>
    </div>
  </div>
  <div class="row mt-3 animated fadeInUp selectorCollapse" *ngIf="showCollapse">
    <div class="col-12">
      <div class="card card-body p-2">
        <div *ngFor="let item of selector.choiceItems" class="form-group row mb-2">
          <div class="col-12 font-weight-bold align-items-center font-75">
            <label>{{item.title}}:</label>
          </div>
          <div class="col-12 align-items-center">
            <ng-container *ngFor="let choice of item.choices; let i = index;">
              <label [for]="item.name + i" class="btn btn-sm py-0 px-1 mr-2 font-75"
                     [ngClass]="{'active': selectForm?.controls[item.name].controls[i].value}">
                {{ choice.name }}
              </label>
              <input [id]="item.name + i" class="d-none" title="" type="checkbox"
                     [formControl]="selectForm?.controls[item.name].controls[i]"
                     [checked]="choice.flag"
                     (change)="choice.flag = !choice.flag">
            </ng-container>

          </div>
        </div>
        <div *ngIf="selector?.dateTimeRange">
          <div class="form-group row mb-2">
            <div class="col-12 font-75 font-weight-bold">
              <span>开始时间</span>
            </div>
            <div class="col-12">
              <input title="开始时间" id="start_date_time" class="form-control form-control-sm date-time-input" autocomplete="off"
                     [formControl]="selectForm?.controls[selector.dateTimeRange.name + '_start_date_time']" type="text"
                     [ngToolsDateAndTime]="{data: 'dateAndTime'}">
            </div>
          </div>
          <div class="form-group row mb-2">
            <div class="col-12 font-75 font-weight-bold">
              <span>结束时间</span>
            </div>
            <div class="col-12">
              <input title="结束时间" id="end_date_time" class="form-control form-control-sm date-time-input" autocomplete="off"
                     [formControl]="selectForm?.controls[selector.dateTimeRange.name + '_end_date_time']" type="text"
                     [ngToolsDateAndTime]="{data: 'dateAndTime'}">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</form>



